window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      flag: false,
      additem: {
        id: 0,
        title: '',
        person: '',
        date: '',
      },
      editmsg: {},
      item: [
        { id: 1, title: 'Vue.实战', person: 'Jimmy', date: '2020-06-03' },
        {
          id: 2,
          title: 'Node.js框架 - Koa',
          person: 'Jimmy',
          date: '2020-06-02',
        },
      ],
    },
    methods: {
      add(e) {
        e.preventDefault()
        // ES6的sort排序方法是直接对原数组进行操作  所以结束了之后我们要将数组再次排序顺序改回来
        const idmax = this.item.sort((a, b) => b.id - a.id)[0].id + 1
        this.item.sort((a, b) => a.id - b.id)
        this.additem.id = idmax
        /*
          如果使用 this.item.push(this.additem) 那么这种情况就是浅拷贝 后果就是每次的已经赋值的id都会改变
            原因是我们赋值的是一个地址 而不是一个值 这种情况就会造成数据已经添加了还是会发火说呢过错误
        */
        // this.item.push(this.additem)
        this.item.push({
          id: this.additem.id,
          title: this.additem.title,
          person: this.additem.person,
          date: this.additem.date,
        })
        console.log(this.item)
      },
      del(index) {
        // splice 删除数组中的某一个元素 给一个索引 加上删除的位数
        this.item.splice(index, 1)
      },
      showdialog(index) {
        this.flag = !this.flag
        this.editmsg = {
          id: this.item[index].id,
          title: this.item[index].title,
          person: this.item[index].person,
          date: this.item[index].date,
        }
      },
      update() {
        this.item.forEach((item) => {
          if (item.id === this.editmsg.id) {
            item.id = this.editmsg.id
            item.title = this.editmsg.title
            item.person = this.editmsg.person
            item.date = this.editmsg.date
          }
        })
        this.flag = !this.flag
      },
    },
  })
}
